<%@page import="java.util.Iterator"%>
<%@page import="br.com.fatecpg.babelchat.Chat"%>
<%@page import="java.util.HashMap"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>


<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#">
    <html class="wf-proximanova1proximanova2-n1-active wf-active" lang="en"><head>
            <script src="about_arquivos/ga.js" async="" type="text/javascript"></script>
            <script src="about_arquivos/rum.js" async="" type="text/javascript"></script><script>var NREUMQ=[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);(function(){var d=document;var e=d.createElement("script");e.type="text/javascript";e.async=true;e.src="https://d1ros97qkrwjf5.cloudfront.net/16/eum/rum.js	";var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(e,s);})()</script>

            <meta content="IE=EmulateIE8" http-equiv="X-UA-Compatible">
            <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">


            <title>Babel Chat</title>
            <link href="style.css" media="screen" rel="stylesheet" type="text/css">
            <link href="about_arquivos/workspace.css" media="screen" rel="stylesheet" type="text/css">
            <!--[if IE 7]>
            <link href="/stylesheets/ie7.css?1313421292" media="screen" rel="stylesheet" type="text/css" />
            <![endif]-->
            <!--[if IE 8]>
            <link href="/stylesheets/ie8.css?1313421292" media="screen" rel="stylesheet" type="text/css" />
            <![endif]-->
            <link href="imagens/ico.png" rel="shortcut icon" type="image/x-icon">
            <script src="about_arquivos/jlt3cri.js" type="text/javascript"></script>
            <style type="text/css">#header h1,.tk-proxima-nova{font-family:proxima-nova-1,proxima-nova-2,sans-serif;}</style><link href="about_arquivos/jlt3cri-d.css" rel="stylesheet"><script>
                //<![CDATA[
                try{Typekit.load();}catch(e){}
                //]]>
            </script>
            <script type="text/javascript">
                function iniciaAjax() {
                    var objetoAjax = false;
                    if (window.XMLHttpRequest) {
                        objetoAjax = new XMLHttpRequest();
                    } else if (window.ActiveXObject) {
                        try {
                            objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch(e) {
                            try {
                                objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
                            } catch(ex) {
                                objetoAjax = false;
                            }
                        }
                    }
                    return objetoAjax;
                }
                var req=iniciaAjax();
                var statusSala = 'Escolher Sala';
                    
                
                String.prototype.trim = function () {
                    return this.replace(/^\s+|\s+$/g,"");
                }
                function sendUserInfo(nome,imagem,locale){
                    var url = "/babelChat/userconfig?name="+nome+"&language="+locale+"&imagesrc="+imagem;
                    req.open("Get",url,true);
                    req.onreadystatechange = callback;
                    req.send(null);
                }
                function callback(){
                    if (req.readyState==4){
                        if (req.status == 200){
                        }
                    }
                }
                function getSala(nomeSala) {
                    var form = document.getElementById('formNovaSala');
                    form.action = '/babelChat/salas/'+nomeSala;
                    form.submit();
                }
                function setSala() {
                    var form = document.getElementById('formNovaSala');
                    form.action = '/babelChat/salas/'+document.getElementById('novaSalaText').value;
                    form.submit();
                }
            </script>

            <style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	width:446px;
	height:258px;
	z-index:1;
	left: 168px;
	top: 190px;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.15);
	border: 1px solid #3366BB;
	border-radius: 4px 4px 4px 4px;
	margin-bottom: 20px;
	overflow: hidden;
	padding: 19px;
}
-->
            </style>
    </head>

        <body class="subpage" onLoad="document.getElementById('novaSalaText').focus();">
            <form method="post" id="formNovaSala">
                <input type="hidden" name="novaSala" value="true" />
            </form>
            <fmt:setLocale scope="session" value="${param['language']}" />
            <div id="flash_msg" style="display:none">
                <div class="container_12">
                    <p class="notice"></p>
                    <p class="alert"></p>
                </div>
            </div>
            <div id="top_bar">
                <div class="container_12">
                    <div class="grid_3"><a href="babel.html"><img alt="Logo" src="about_arquivos/logo.png"></a></div>
                    <div class="grid_5 prefix_4 make_relative">
                        <div id="counter">
                            <div id="">
                              <table width="200" border="0">
                                <tr>
                                  <td><a href="http://localhost:8080/babelChat/?language=pt"><img src="flags/pt_BR.png"></a></td>
                                  <td><a href="http://localhost:8080/babelChat/?language=en"><img src="flags/en_US.png"></a></td>
                                  <td><a href="http://localhost:8080/babelChat/?language=es"><img src="flags/es_ES.png"></a></td>
                                </tr>
                              </table>
</div>
                            <a href="#">
                                <div style="display: none;" id="counter_overlay"></div>
                            </a>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div id="header_outer">
                <div id="header_outer_top"></div>
                <div id="header">
                    <div id="header_inner">
                        
                        <div class="container_12">
                            <ul id="nav">
                                <li class="current"><a href="index.jsp"><fmt:message key="index.btn_inicio" /></a></li>
                                <li class=""><a href="babel.jsp"><fmt:message key="index.btn_projeto" /></a></li>
                                <li class=""><a href="contato.jsp"><fmt:message key="index.btn_contato" /></a></li>
                                <li class=""><a href="tec.jsp"><fmt:message key="index.btn_tecnologia" /></a></li>
                                <li class=""><a href="agradecimentos.jsp"><fmt:message key="index.btn_agradecimento" /></a></li>
                            </ul>
                            <div class="grid_12">
                                <%--<h1>Bem-Vindo ao Babel Chat</h1>--%>
                                <h1><fmt:message key="index.bemvindo" /></h1>
                                
                            </div>
                            <div class="grid_6">
                                <div class="promo expand_left">
                                    <div class="welcome_video" id="vid_container" align="center">
                                      <div id="apDiv1"><img src="imagens/logobabel.png" width="378" height="266"></div>
                                    </div>
                                    
                              </div>
                            </div>

                            <div class="grid_6">
                                <h2><fmt:message key="index.titulo" /></h2>
                                <div class="fb" style="width: 380px; height: 80px"><fb:login-button show-faces="true" width="400"></fb:login-button></div>
                                <p class="about"><span id="result_box">A new experience of talking with the world. Come experience you too!</span></p>
                                


                            </div>
                            <div class="clear"></div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="main">
                
                <div class="container_12"><div id="fb-root"></div>
                    <h3 style="float: right; border-right: 50px; border-top: 40px; text-align: right; top: 202px; left: 8px"><fb:fan profile_id="247146371975479" stream="2" connections="6" width="200"></fb:fan></h3>
                    <script>(function(d, s, id) {
                        var js, fjs = d.getElementsByTagName(s)[0];
                        if (d.getElementById(id)) {return;}
                        js = d.createElement(s); js.id = id;
                        js.src = "//connect.facebook.net/en_US/all.js#appId=247146371975479&xfbml=1";
                        fjs.parentNode.insertBefore(js, fjs);
                    }(document, 'script', 'facebook-jssdk'));
                    window.fbAsyncInit = function() {
                        FB.init({appId: '247146371975479', status: true, cookie: true, xfbml: true});
                        FB.Event.subscribe('auth.login', function(response) {
                            login();
                        });
                        FB.Event.subscribe('auth.logout', function(response) {
                        });
                        FB.getLoginStatus(function(response) {
                            if (response.session) {
                                login();
                            }
                        });
                    };
                    (function() {
                        var e = document.createElement('script');
                        e.type = 'text/javascript';
                        e.src = document.location.protocol +
                            '//connect.facebook.net/en_US/all.js';
                        e.async = true;
                        document.getElementById('fb-root').appendChild(e);
                    }());

                    function login(){
                        FB.api('/me', function(response) {
                            document.getElementById('login').style.display = "inherit";
                            facebookstatus = 'true';
                            getInfo();

                        });
                    }
                    function getInfo(){
                        FB.api('/me', function(response) {
                            var query = FB.Data.query('select name,locale,pic_square from user where uid={0}', response.id);
                            query.wait(function(rows){
                                sendUserInfo(rows[0].name, rows[0].pic_square.replace('http://profile.ak.fbcdn.net/hprofile-ak-snc4/',''), rows[0].locale);

        });
    });
}</script>

                    
                    <center><div class="divIndex"><br>
                            <div id="login" style="display: none"></div>
                        </div></center>
                    <center><div class="divIndex"><h2><fmt:message key="index.label" /></h2>
                            <%
                                        if (getServletContext().getAttribute("salas") == null) {
                                            HashMap<String, Chat> salas = new HashMap<String, Chat>();
                                            getServletContext().setAttribute("salas", salas);
                                        }
                                        HashMap<String, Chat> salas = (HashMap<String, Chat>) getServletContext().getAttribute("salas");

                                        for (Iterator it = salas.keySet().iterator(); it.hasNext();) {
                                            String key = (String) it.next();
                                            int numero = salas.get(key).pessoas.size();
                                            String nmPessoas = String.valueOf(numero);
                            %>
                            <div class="fb3" style="vertical-align: middle"><%= key%>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<fb:login-button show-faces="false" size="medium" onclick="javascript:getInfo()" onlogin="javascript:getInfo();getSala('<%=key%>')"><fmt:message key="index.btnEntrar" />&nbsp;(<%= nmPessoas%>)</fb:login-button></div>
                            <%
                                        }
                            %>

                            <input type="text" id="novaSalaText" />
                            <%--<input type="button" style="background: #3b5998;color: white;padding: 2px 18px 3px 18px;border-top: 1px white solid;border-left: 1px white solid;border-right: 1px #000033 solid; border-bottom: 1px #000033 solid;" value="ok" name="ok" />--%>
                            <fb:login-button show-faces="false" size="medium" onlogin="javascript:setSala();"><fmt:message key="index.btnCriar" /></fb:login-button><br>
                            <%--<fb:comments width='800'/><br><br>--%>
                            <br><br><br>
                            <%--<h3 style="text-align: left"><fb:comments href="http://localhost:8080/babelChat/"></fb:comments></h3>--%>

                        </div></center>


                    <div class="grid_9">
                        <div id="sub_nav"></div>,
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div id="copyright"></div>
            <div id="footer">
                <h6 style="position: absolute"><div style="top: 10px"><fb:login-button autologoutlink="true" size="medium" background="white" style="display: inline; top: 10px;" length="short"></fb:login-button></div></h6>
                <div class="container_12">
                    <div class="grid_4">
                        <div id="footer_campus_selector"> <span id="footer_campus_current"> <a href="http://www.fatecpg.com.br" class="location_link">Fatec Praia grande</a></span> <a href="#" id="footer_campus_trigger"> <span class="translation_missing" title="translation missing: en.select_campus">Select Campus</span></a></div>
                    </div>
                    <div class="grid_4 align_right"><img alt="Babel Chat" src="about_arquivos/logo.png"><a><fb:send style="top: 10px" href="http://localhost:8080/babelChat/"></fb:send></a></div>
                    <div class="grid_4">
                        <div id="footer_search">
                            <form action="" method="get">
                                <input name="cof" value="FORID:11" type="hidden">
                                <label for="footer_search_input">
                                    <label><span class="style2">Powered By Microsoft</span></label>
                                    
                                </label>
                                
                            </form>
                        </div>
                    </div>
                    
                    <div class="clear"></div>
                </div>
                
            </div>
            <div id="campus_menu_tooltip">
                <span class="menu_top"></span>
                <ul>
                    <li>Babel chat</li>
                </ul>
                <span class="menu_bottom"></span>
            </div>
            <div id="campus_menu">
                <span class="menu_top"></span>
                <span class="menu_bottom"></span>
            </div>
            <div id="facebook_menu">
                <span class="menu_top"></span>
                <ul>
                    <li class="header"></li>
                    <li><a href="index.jsp" class="main">Babel chat</a></li>
                    <li class="subheader"></li>
                </ul>
                <span class="menu_bottom"></span>
            </div>

        </body></html>
